import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Cookies from "js-cookie";
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/components/login.vue')
  },
  {
    path: '/login1',
    name: 'login1',
    component: () => import('@/components/login1.vue')
  },
  {
    path: '/',
    redirect: '/home'
  },
  // { path: '/dv1', name: 'dv1', component: () => import('@/views/dataV/dataV1.vue') },
  { path: '/dv2', name: 'dv2', component: () => import('@/views/dataV/dataV2.vue') },
  { path: '/dv4', name: 'dv4', component: () => import('@/views/dataV/dataV4.vue') },
  { path: '/dvDemo1', name: 'dvDemo1', component: () => import('@/views/dataV/demo1/index.vue') },
  {
    path: '/home',
    name: 'home',
    redirect: '/welcome',
    component: HomeView,
    children: [
      { path: '/welcome', name: 'welcome', component: () => import(/*webpackChunkName : "welcome "*/'@/components/welcome.vue') },
      { path: '/about', name: 'about', component: () => import('@/views/AboutView.vue') },
      { path: '/user', name: 'user', component: () => import('@/views/user/index.vue') },
      { path: '/iconSelect', name: 'iconSelect', component: () => import('@/views/demo/form1.vue') },
      { path: '/flowChat', name: 'flowChat', component: () => import('@/views/demo/demo1.vue') },
      { path: '/flowChat2', name: 'flowChat2', component: () => import('@/views/demo/demo2.vue') },
      { path: '/flowChat1', name: 'flowChat1', component: () => import('@/views/demo/demo3.vue') },
      { path: '/flowChat3', name: 'flowChat3', component: () => import('@/views/demo/demo4.vue') },
      { path: '/flowChat4', name: 'flowChat4', component: () => import('@/views/demo/demo5.vue') },
      { path: '/flowChat5', name: 'flowChat5', component: () => import('@/views/demo/demo6.vue') },
      { path: '/flowChat6', name: 'flowChat6', component: () => import('@/views/demo/demo7.vue') },
      { path: '/flowChat7', name: 'flowChat7', component: () => import('@/views/demo/demo8.vue') },
      { path: '/flowChat8', name: 'flowChat8', component: () => import('@/views/demo/demo9.vue') },
      { path: '/echats1', name: 'ehats1', component: () => import('@/views/echarts/demo1.vue') },
      { path: '/echats2', name: 'ehats2', component: () => import('@/views/echarts/demo2.vue') },
      { path: '/echats3', name: 'ehats3', component: () => import('@/views/echarts/demo3.vue') },
      { path: '/echats4', name: 'ehats4', component: () => import('@/views/echarts/demo4.vue') },
      { path: '/echats5', name: 'ehats5', component: () => import('@/views/echarts/demo5.vue') },
      { path: '/echats6', name: 'ehats6', component: () => import('@/views/echarts/demo6.vue') },
      { path: '/echats7', name: 'ehats7', component: () => import('@/views/echarts/demo7.vue') },
      { path: '/echats8', name: 'ehats8', component: () => import('@/views/echarts/demo8.vue') },
      { path: '/echats9', name: 'ehats9', component: () => import('@/views/echarts/demo9.vue') },
      { path: '/echats10', name: 'ehats10', component: () => import('@/views/echarts/demo10.vue') },
      { path: '/echats11', name: 'ehats11', component: () => import('@/views/echarts/demo11.vue') },
      { path: '/echats12', name: 'ehats12', component: () => import('@/views/echarts/demo12.vue') },
      { path: '/echats13', name: 'ehats13', component: () => import('@/views/echarts/demo13.vue') },
      { path: '/fishbone', name: 'ehats13', component: () => import('@/views/demo/fishbone.vue') },

      { path: '/element1', name: 'element1', component: () => import('@/views/element_ui/demo1.vue') },
      { path: '/element2', name: 'element2', component: () => import('@/views/element_ui/addColumn.vue') },
      { path: '/element5', name: 'element5', component: () => import('@/views/element_ui/addColumn1.vue') },
      { path: '/element3', name: 'element3', component: () => import('@/views/element_ui/mergeTable.vue') },
      { path: '/element4', name: 'element4', component: () => import('@/views/element_ui/tableMultiple.vue') },
      { path: '/element6', name: 'element6', component: () => import('@/views/element_ui/editTree.vue') },
      { path: '/element7', name: 'element7', component: () => import('@/views/element_ui/tableScroll.vue') },
      { path: '/tableCopy', name: 'tableCopy', component: () => import('@/views/element_ui/tableCopy.vue') },
      { path: '/tableCopy2', name: 'tableCopy2', component: () => import('@/views/element_ui/tableCopy2.vue') },
      { path: '/tableChangeByBoard', name: 'tableChangeByBoard', component: () => import('@/views/element_ui/tableChangeByBoard.vue') },
      { path: '/form1', name: 'form1', component: () => import('@/views/element_ui/form/index.vue') },


      { path: '/qianming', name: 'qianming', component: () => import('@/views/qianming/index.vue') },
      { path: '/cj', name: 'cj', component: () => import('@/views/qianming/choujiang.vue') },
      { path: '/process1', name: 'process1', component: () => import('@/views/process/demo1.vue') },
      { path: '/process2', name: 'process2', component: () => import('@/views/process/demo2.vue') },
      { path: '/process3', name: 'process3', component: () => import('@/views/process/jsmind.vue') },


      { path: '/css1', name: 'css1', component: () => import('@/views/css/index.vue') },
      { path: '/wow', name: 'wow', component: () => import('@/views/css/wow.vue') },
      // 个性化
      { path: '/speak', name: 'speak', component: () => import('@/views/funning/speak.vue') },
      { path: '/parallax', name: 'parallax', component: () => import('@/views/funning/parallax.vue') },
      { path: '/vueTourStep', name: 'vueTourStep', component: () => import('@/views/funning/vueTourStep.vue') },

      { path: '/scrollx', name: 'scrollx', component: () => import('@/views/css/scrollX.vue') },

      { path: '/socket', name: 'socket', component: () => import('@/views/webSocket/index.vue') },

      { path: '/three1', name: 'three1', component: () => import('@/views/three/demo.vue') },

      { path: '/gojs1', name: 'gojs1', component: () => import('@/views/goJs/familyTree.vue') },

      { path: '/dv1', name: 'dv1', component: () => import('@/views/dataV/dataV1.vue') },
      { path: '/dv3', name: 'dv3', component: () => import('@/views/dataV/dataV3.vue') },


      { path: '/digui', name: 'digui', component: () => import('@/views/demo/digui.vue') },
      { path: '/drag', name: 'drag', component: () => import('@/views/css/drag.vue') },
      { path: '/scrolly', name: 'scrolly', component: () => import('@/views/css/scrollY.vue') },
      { path: '/handsomtable', name: 'handsomtable', component: () => import('@/views/handsomtable/index.vue') },


      { path: '/draggable', name: 'draggable', component: () => import('@/views/draggable/index.vue') },
      { path: '/draggable1', name: 'draggable1', component: () => import('@/views/draggable/index1.vue') },
      { path: '/draggable2', name: 'draggable12', component: () => import('@/views/draggable/index2.vue') },

    ]
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/AboutView.vue')
  },
  // 匹配不到的路由都进入404
  {
    path: '*',
    name: '404',
    component: () => import('@/components/notFound')
  }
]

const router = new VueRouter({
  routes
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to：将要访问的路径； from：从哪个路径跳转来 next是一个方法，表示放行
  if (to.path === '/login') return next()
  // 获取token
  // const tokenstr = window.sessionStorage.getItem('token');
  const userName = Cookies.get('userName');
  // 判断没有token，跳转到登录页面
  if (!userName) {
    return next('/login')
  }
  // 登录了，正常跳转
  next()
})
export default router
